<template>
  <div class="app-container">
    <div class="ruleFormWarp">
      <div></div>
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleFormRef">
        <el-form-item label="" prop="oldPw">
          <el-input type="password" v-model="ruleForm.oldPw" autocomplete="off" placeholder="请输入原密码"
            @input="password_input_static($event, 'ruleForm.oldPw')" show-password></el-input>
        </el-form-item>
        <el-form-item label="" prop="newPwF">
          <el-input type="password" v-model="ruleForm.newPwF" autocomplete="off" placeholder="请输入新密码，6-20位数字或字母"
            @input="password_input_static($event, 'ruleForm.newPwF')" show-password></el-input>
        </el-form-item>
        <el-form-item label="" prop="newPwS">
          <el-input type="password" v-model="ruleForm.newPwS" autocomplete="off" placeholder="请再次输入新密码"
            @input="password_input_static($event, 'ruleForm.newPwS')" show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="btn" type="warning" @click="submitForm('ruleFormRef')"
            :loading="submitLoading">提交</el-button>
        </el-form-item>
      </el-form>
      <div></div>
    </div>
  </div>
</template>
<script>
import { md5 } from "js-md5";
import { updatePuserPw } from '@/api/my/index'
import { mapGetters } from 'vuex'
import { password_input_static } from '@/utils/mixins'
export default {
  mixins: [password_input_static],
  data() {
    let validatePass1 = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('原密码不能为空'));
      }
      callback();
    };
    let validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'));
      } else {
        if (this.ruleForm.newPwS !== '') {
          this.$refs.ruleFormRef.validateField('newPwS');
        }
        callback();
      }
    };
    let checkPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入新密码'));
      } else if (value !== this.ruleForm.newPwF) {
        callback(new Error('两次输入新密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      submitLoading: false,
      ruleForm: {
        oldPw: '',
        newPwF: '',
        newPwS: ''
      },
      rules: {
        oldPw: [
          { validator: validatePass1, trigger: 'blur' }
        ],
        newPwF: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        newPwS: [
          { validator: checkPass, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'introduction',
    ]),
    userId() {
      if (this.introduction) {
        return this.introduction.id || ''
      }
      return ''
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = { ... this.ruleForm };
          for (let key in params) {
            params[key] = params[key].trim()
          }
          if (params.oldPw === params.newPwF) {
            this.$message.error('旧密码与新密码相同。')
            return
          }
          params = {
            // oldPw: 'e10adc3949ba59abbe56e057f20f883e', // 这个是123456的秘密
            // newPwF: 'e10adc3949ba59abbe56e057f20f883e',
            // newPwS: 'e10adc3949ba59abbe56e057f20f883e',

            id: this.userId,
            oldPw: md5(params.oldPw),
            newPwF: md5(params.newPwF),
            newPwS: md5(params.newPwS),
          }

          this.submitLoading = true
          updatePuserPw(params).then(res => {
            if (res.code === 200) {
              this.$message.success('修改成功!')
              setTimeout(() => {
                this.$router.push("/my/index")
              }, 2000)
              return
            } else {
              this.$message.error('修改失败。')
            }
            this.submitLoading = false
          }).catch(err => {
            this.$message.error('系统错误，服务失败。')
            this.submitLoading = false
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  }
}
</script>
<style scoped lang="scss">
.app-container {
  width: 100%;
  height: 100%;
  padding: 20px;
  display: flex;
}

.ruleFormWarp {
  flex: 1;
  background-color: #fff;
  border-radius: 16px;
  display: grid;
  justify-content: center;
  grid-template-rows: 38fr auto 68fr;

  .el-form {
    min-width: 320px;
    flex-shrink: 0;
  }

  .btn {
    width: 100%;
  }
}
</style>